<template>
    <div class="login_container">
      <div class="login_box">
          <!-- 头像区域 -->
          <div class="img_box">
              <img src="../assets/logo.png" alt="">
          </div>
          <!-- 登录表单区域 -->
          <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
              <el-form-item prop="username">
                <el-input v-model="loginForm.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password"></el-input>
              </el-form-item>
              <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
              </el-form-item>
          </el-form>
      </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data(){
      return {
        // 登录表单的数据绑定对象
        loginForm: {
          username: 'admin',
          password: '123456'
        },
        // 登录表单的规则验证对象
        loginFormRules: {
          username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      resetLoginForm(){
        // 重置登录表单
        this.$refs.loginFormRef.resetFields()
      },
      login(){
        // 登录表单进行验证
        this.$refs.loginFormRef.validate(async valid=>{
          // console.log(valid);
          if(!valid) return
          // 返回的promise可以被await修饰，解构出来的data重命名为res
          // await只能用在被async修饰的方法中
          const { data:res } = await this.$http.post("login",this.loginForm)
          // console.log(res);
          if(res.meta.status !== 200) return this.$message.error('登录失败')
          this.$message.success('登录成功')
          // 将token保存到sessionStorage中，token只应在当前网站打开期间有效
          window.sessionStorage.setItem('token',res.data.token)
          this.$router.push('/home')
        })
      }
    },
    created() {
      
    }
}
</script>

<style lang="stylus" scoped>
.login_container
  overflow hidden
  height 100%
  background-color #2b4b6b
  .login_box
    position absolute
    top 50%
    left 50%
    transform translate(-50%,-50%)
    width 450px
    height 300px
    background-color #fff
    border-radius 3px                         
    .img_box
        position absolute
        left 50%
        transform translate(-50%,-50%)
        padding 10px
        width 130px
        height 130px
        border 1px solid #eee
        border-radius 50%
        box-shadow 0 0 10px #eee
        background-color #fff
        img 
            width 100%
            height 100%
            border-radius 50%
            background-color #eee
    .login_form
        position absolute
        bottom 0
        width 100%
        padding 0 20px
        box-sizing border-box
        .btns
            display flex
            justify-content flex-end

</style>